<template>
  <div>
    <el-row class="subNav-lottery" v-if="gameInfo">
      <button v-for="(item, index) in gameInfo " :class="nowSelectedGame.value===item.value?'subNav-lotteryBtn-selected':''" class="subNav-lotteryBtn" :key="index" @click="handleGameInfoClick(item)">
        {{item.label}}
      </button>
    </el-row>

    <el-row class="subCurrPage">
      <ul class="subCurrPage-left">
        <span>当前选中：</span>
        <span style="color:#eb6100">{{nowSelectedGame.label}}</span>
        <img src="../../../../static/agent/img/ico_arrow.png" width="15"/>
      </ul>
      <ul class="subCurrPage-right">
        <button v-for="(item, index) in realtimePt " :class="nowRtt.name===item.name?'isSelectedBtn':''" :key="index" @click="changeRtt(item)">
          {{item.name}}
        </button>
      </ul>
    </el-row>

    <el-dialog :visible.sync="dialogVisible">
      <table style="width: 100%" v-if="popupGameInfo">
        <thead>
        <tr class="totals-title">
          <th colspan="5">万千定位</th>
        </tr>
        </thead>
        <tbody>
        <tr class="totals-num">
          <td v-for="(item,index) in content_title" :key="index">
            {{item}}
          </td>
          <td>
            操作
          </td>
        </tr>
        <tr class="totals-num" v-for="(item ,index) in popupGameInfo" :key="index">
          <td>
            {{item.content}}
          </td>
          <td>
            {{item.amount}}
          </td>
          <td>
            {{item.comm}}
          </td>
          <td>
            {{item.win}}
          </td>
          <td>
            <button @click="showBuHuo($event, item)">
              补货
            </button>
          </td>
        </tr>
        </tbody>
      </table>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
        <el-button @click="dialogVisible = false">取 消</el-button>
      </div>
    </el-dialog>

    <div style="position: fixed; z-index: 999"><div id="dialogshow"  @click="diashowclick" class="dialogshow" :style="'display:'+ dialogshow" ></div></div>
    <div class="myDialog" :style="'display:'+popoverVisibleID+';left:'+popoverX+'px;top:'+popoverY+'px'">
      <div v-if="subRealtime">
        <div v-if="realTimeMode === 1">
          <ul class="myDialog-title">补货单</ul>
          <ul>
            <span>类型</span>
            <span>{{subRealtime.value}}</span>
          </ul>
          <ul>
            <span>赔率</span>
            <span>{{subRealtime.odds}}</span>
          </ul>
          <ul>
            <span>金额</span>
            <span><input ref="buhuoText" type="text" v-model="myPopupamount"></span>
          </ul>
          <ul>
            <span>限额</span>
            <span>{{subRealtime.amount}}</span>
          </ul>
          <ul class="myDialog-buttonGroup">
            <button @click="paddingBtn">补出</button>
            <button @click="cancel">取消</button>
          </ul>
        </div>
        <div v-else>
          <ul class="myDialog-title">补货单</ul>
          <ul>
            <span>类型</span>
            <span>{{subRealtime.content}}</span>
          </ul>
          <ul>
            <span>赔率</span>
            <span>{{otherTypeBuHuoOdds}}</span>
          </ul>
          <ul>
            <span>金额</span>
            <span><input ref="buhuoText" type="text" v-model="myPopupamount"></span>
          </ul>
          <ul>
            <span>限额</span>
            <span>{{subRealtime.amount}}</span>
          </ul>
          <ul class="myDialog-buttonGroup">
            <button @click="paddingBtn">补出</button>
            <button @click="cancel">取消</button>
          </ul>
        </div>
      </div>
    </div>

    <el-row class="bread-nav">

      <ul class="bread-nav-lastResultInfo">
        {{realtimesInfo.period}}期
      </ul>
      <ul class="bread-nav-lastResultInfo-group1">
      <span class="bread-nav-lastResultInfo-name">
        {{nowRtt.name}}
      </span>

        <span class="bread-nav-lastResultInfo-close" v-show="isClose">
        距开奖：{{resultTime.minutes | twoDigits}}:{{resultTime.seconds | twoDigits}}
        </span>
        <span class="bread-nav-lastCloseInfo-close"  v-show="!isClose">
        距封盘：{{ closeTime.minutes | twoDigits }}:{{ closeTime.seconds | twoDigits }}
        </span>
        <span class="bread-nav-lastCloseInfo-close">
          今日输赢：{{realtimesInfo.win == null?0:realtimesInfo.win}}
        </span>
      </ul>
      <!--下拉列表-->
      <ul class="bread-nav-lastResultInfo-group2">
        <!-- 本来可以循环出来的，但火狐好像选择的时候会跳动，这样写不会跳动，暂时不知道为什么-->
        <select v-model="panSelected" @change="changeSelected">
          <option value="0">
            全部
          </option>
          <option value="1">
            A盘
          </option>
          <option value="2">
            B盘
          </option>
          <option value="3">
            C盘
          </option>
          <option value="4">
            D盘
          </option>
        </select>
        <select v-model="typeSelected" @change="changeSelected">
          <option value="1">
            实占
          </option>
          <option value="2">
            虚占
          </option>
          <option value="3">
            补货
          </option>
        </select>
        <select v-model="sortSelected" @change="changeSelected">
          <option value="1">
            按盈亏排序
          </option>
          <option value="2">
            按金额排序
          </option>
          <option value="3">
            按号码排序
          </option>
        </select>
      </ul>
      <ul class="bread-nav-lastResultInfo-group3">
        <button @click="reflashLastResult()" class="bread-nav-lastResultInfo-group3-btn">
          刷新
        </button>
        <span>
         {{requestSecond}}秒
        </span>
        <!--<span>-->
        <!--正在载入中-->
        <!--</span>-->
        <select v-model="requestInterval" @change="selectedChange">
          <option v-for="item in reflashTime" :value="item.value">
            {{item.label}}
          </option>
        </select>
      </ul>
      <ul class="bread-nav-lastResultInfo-group3">
        <span class="lastResultNum">
          {{realtimesInfo.prePeriod}}
          <span style="color:#344b50">期开奖</span>
        </span>
        <ul class="menu1">
          <div v-if="realtimesInfo.preBallNums" :class="{
                  T_PK10:nowSelectedGame.value==='bjpk10'||nowSelectedGame.value==='azlucky10'||nowSelectedGame.value==='amsc'||nowSelectedGame.value==='jsft'
                  ||nowSelectedGame.value==='amjssc'||nowSelectedGame.value==='xyft'||nowSelectedGame.value==='jssc'||nowSelectedGame.value==='amjsssc'
                  ||nowSelectedGame.value==='amssc'||nowSelectedGame.value==='hlsc'||nowSelectedGame.value==='hljssc',
                  T_KL8:nowSelectedGame.value==='bjkl8'||nowSelectedGame.value==='azlucky20',
                  T_SSC:nowSelectedGame.value==='azlucky5'||nowSelectedGame.value==='jsssc'||nowSelectedGame.value==='xjssc'
                  ||nowSelectedGame.value==='tjssc'||nowSelectedGame.value==='bsssc'||nowSelectedGame.value==='gama',
                  L_CQHLSX:nowSelectedGame.value==='cqssc',
                  T_KLSF:nowSelectedGame.value==='gdklsf'||nowSelectedGame.value==='azlucky8',XYNCTerm:nowSelectedGame.value==='cqxync',
                  T_K3:nowSelectedGame.value==='gxk3',T_11X5:nowSelectedGame.value==='gd115',T_GXKLSF:nowSelectedGame.value==='gxklsf',
                }" class="b-container">
            <div v-if="nowSelectedGame.value==='pcegg'">
              <span :class="'pc28_ball_grey_'+ realtimesInfo.preBallNums.substring(0,1)"></span><span style="margin: 7px 9px 0 9px">+</span>
              <span :class="'pc28_ball_grey_'+ realtimesInfo.preBallNums.substring(2,3)"></span><span style="margin: 7px 9px 0 9px">+</span>
              <span :class="'pc28_ball_grey_'+ realtimesInfo.preBallNums.substring(4,5)"></span><span style="margin: 7px 9px 0 9px">=</span>
              <span :class="'pc28_ball_'+ (realtimesInfo.preBallNums.substring(0,1)*1+realtimesInfo.preBallNums.substring(2,3)*1+
                realtimesInfo.preBallNums.substring(4,5)*1)"></span>
            </div>
            <!--<span :class="{pc28_ball_grey_0:nowSelectedGame.value === 'pcegg',}"></span>-->
            <b v-for="(item,index) in (realtimesInfo.preBallNums.split(','))" :key="index" class="bb" :class="`b${item}`"></b>
          </div>
        </ul>
      </ul>
    </el-row>

    <div class="contentMiddle">
      <el-row class="totals">
        <table v-if="realtimePt">
          <thead>
          <tr class="totals-title">
            <th v-for="(item,index) in realtimePt" :key="index">
              {{item.name}}
            </th>
          </tr>
          </thead>
          <tbody>
          <tr class="totals-num myTableTr upTable">
            <td v-for="(item,index) in realtimePt" :key="index">
              <button @click="changeRtt(item)">
                {{item.amount}}
              </button>
            </td>
          </tr>
          </tbody>
        </table>
      </el-row>

      <el-row class="content" v-if="realtime">
        <table class="top-table" v-if="realTimeMode === 1 ">
          <tr v-if="!realTimeMultiLine">
            <td v-for="(list,index) in realtime" :key="index">
              <table>
                <thead>
                <tr class="totals-title">
                  <th>
                    种类
                  </th>
                  <th>
                    赔率
                  </th>
                  <th>
                    金额
                  </th>
                  <th>
                    盈亏
                  </th>
                </tr>
                <tr class="totals-title">
                  <th colspan="4">
                    {{realtimeTitle[index]}}
                  </th>
                </tr>
                </thead>
                <tbody>
                <tr class="totals-num myTableTr" v-for="(item ,index1) in list" :key="index1">
                  <td class="totals-num-title">
                    {{item.value}}
                  </td>
                  <td class="table-odds" :class="{'totals-num-title':(item.odds === '' || isClose)}">
                    {{item.odds}}
                  </td>
                  <td class="table-amount" :class="{'totals-num-title':(item.amount === '' || isClose)}">
                    <span class="spanA" @click="goNoteetails(item.option_code)">{{item.amount}}</span>
                  </td>
                  <td @click="showBuHuo($event, item)" class="table-balance" :class="{'totals-num-title':(item.balance === '' || isClose)}">
                    <span class="spanA">{{item.balance}}</span>
                  </td>
                </tr>
                </tbody>
              </table>
            </td>
          </tr>

          <tr v-else>
            <td v-for="(list,index) in realtime" :key="index">
              <table>
                <thead>
                <tr class="totals-title">
                  <th>
                    种类
                  </th>
                  <th>
                    赔率
                  </th>
                  <th>
                    金额
                  </th>
                  <th>
                    盈亏
                  </th>
                </tr>
                </thead>
                <tbody v-for="(subList, subIndex) in list" :key="subIndex">
                <tr class="totals-title myTableTr">
                  <th colspan="4">
                    {{realtimeTitle[index][subIndex]}}
                  </th>
                </tr>
                <tr class="totals-num" v-for="(item ,index1) in subList" :key="index1">
                  <td class="totals-num-title">
                    {{item.value}}
                  </td>
                  <td class="table-odds" :class="{'totals-num-title':(item.odds === '' || isClose)}">
                    {{item.odds}}
                  </td>
                  <td class="table-amount" :class="{'totals-num-title':(item.amount === '' || isClose)}">
                    <span class="spanA" @click="goNoteetails">{{item.amount}}</span>
                  </td>
                  <td @click="showBuHuo($event, item)" class="table-balance" :class="{'totals-num-title':(item.balance === '' || isClose)}">
                    {{item.balance}}
                  </td>
                </tr>
                </tbody>
              </table>
            </td>
          </tr>
        </table>

        <table class="top-table"  v-else>
          <thead>
          <tr class="totals-title">
            <th v-for="(list,index) in realtimeTitle" :key="index">
              {{list}}
            </th>
          </tr>
          </thead>
          <tbody>
          <tr class="totals-num myTableTr">
            <td v-for="(item ,index1) in realtime" :key="index1">
              {{item[index1].odds}}
            </td>
          </tr>
          <tr class="totals-num myTableTr">
            <td v-for="(item ,index1) in realtime" :key="index1" class="table-amount">
              {{item[index1].amount}}
            </td>
          </tr>
          <tr class="totals-num myTableTr">
            <td v-for="(item ,index1) in realtime" :key="index1" >
              {{item[index1].balance}}
            </td>
          </tr>
          <tr class="totals-num myTableTr">
            <td v-for="(item ,index1) in realtime" :key="index1" class="btn-td">
              <button @click="otherTypeBuHuo(item[index1].group,item[index1].odds)" class="paddingBtn">
                补货
              </button>
            </td>
          </tr>

          </tbody>
        </table>
      </el-row>
      <!--<el-row class="footer">-->
      <!--<ul>-->
      <!--<span>-->
      <!--快速补货:-->
      <!--</span>-->
      <!--<input type="text">-->
      <!--<input type="radio" id="yinkui" name="radio">-->
      <!--<label for="yinkui">平均盈亏</label>-->
      <!--<input type="radio" id="zhancheng" name="radio">-->
      <!--<label for="zhancheng">占成金额</label>-->
      <!--<button @click="dialogVisible = true">-->
      <!--计算补货-->
      <!--</button>-->
      <!--</ul>-->
      <!--</el-row>-->
    </div>
  </div>
</template>

<script>
  import { mapGetters } from 'vuex'

  let interval = null
  let intervalTime = null
  export default {
    name: 'notice',
    computed: {
      ...mapGetters([
        'info',
        'nowSelectedGame',
        'realtime',
        'realtimeTitle',
        'realtimePt',
        'realTimeMode',
        'realTimeMultiLine',
      ]),
      closeTime() {
        const tempTime = this.formatTime(this.diffClose)
        if (parseInt(tempTime.minutes) == 0 && parseInt(tempTime.seconds) == 0) {
          this.isClose = true
        } else {
          this.isClose = false
        }
        return tempTime
      },
      resultTime() {
        return this.formatTime(this.diffResult)
      },
    },
    methods: {
      cancel(){
        this.popoverVisibleID = 'none'
        this.dialogshow = 'none'
        console.log(this.popoverVisibleID,this.dialogshow)
      },
      diashowclick() {
        this.dialogshow = 'none'
        this.popoverVisibleID = 'none'
      },
      // 格式化时间
      CurentTime() {
        const now = new Date()
        const year = now.getFullYear()
        const month = now.getMonth() + 1
        const day = now.getDate()
        let clock = year + '-'
        if (month < 10) {
          clock += '0'
        }
        clock += month + '-'
        if (day < 10) {
          clock += '0'
        }
        clock += day
        return (clock)
      },
      // 下注详情
      goNoteetails(option) {
        const date = this.CurentTime()
        const games = []
        games.push(this.nowSelectedGame.value)
        const tempParams = {
          option: option,
          settle: 2, // 默认未结算
          games: games,
          page: 1,
          period: this.realtimesInfo.period - 2, // 默认当前期数减2
        }
        // console.log(tempParams,"55555")
        this.$store.dispatch('GetOrderBets', tempParams)
          .then(() => {
            const routeData = this.$router.resolve({
              path: '/noteDetails',
              query: { parObj: JSON.stringify(tempParams) },
            })
            window.open(routeData.href, '_blank')
          })
      },
      // 补货按钮
      otherTypeBuHuo(value, odds) {
        const parames = {
          'game': this.nowSelectedGame.value,
          'group': value,
        }
        this.otherTypeBuHuoOdds = odds
        this.popupGameInfo = []
        this.$store.dispatch('GetMbets', parames)
          .then(response => {
            if (response.status === undefined) {
              for (const key in response) {
                if (key !== 'message') {
                  this.popupGameInfo.push(response[key])
                }
              }
              this.dialogVisible = true
            } else {
            }
            alert(response.message)
          })
      },
      // 点击下拉框修改请求间隔时间
      selectedChange() {
        if (this.requestInterval === 0) {
          this.stop = true
        } else {
          this.stop = false
          clearInterval(interval)
          clearInterval(intervalTime)
          this.requestSecond = this.requestInterval
          this.setIntervalRequest()
        }
      },
      // 点击彩种重新请求参数
      handleGameInfoClick(value) {
        this.$store.commit('SET_NOW_SELECTED_GAME', value)
        const params = {
          game: value.value,
          rtt: 1,
          pan: 0, // 默认全部盘口
          type: 1, // 默认实占
          sort: 1, // 按盈亏排序
        }
        this.$store.dispatch('GetRealtime', params)
        this.$store.dispatch('GetRealtimePt', { game: this.nowSelectedGame.value })
          .then(response => {
            this.nowRtt = response[0]
          })
      },
      changeRtt(value) {
        this.nowRtt = value
        this.changeRealTime()
      },
      changeSelected() {
        this.changeRealTime()
      },
      changeRealTime() {
        const temp = {
          game: this.nowSelectedGame.value,
          rtt: parseInt(this.nowRtt.rtt),
          pan: parseInt(this.panSelected),
          type: parseInt(this.typeSelected),
          sort: parseInt(this.sortSelected),
        }
        this.$store.dispatch('GetRealtime', temp)
      },
      paddingBtn() {
        let params = {}
        if (this.realTimeMode === 1) {
          params = {
            period: this.realtimesInfo.period,
            game: this.nowSelectedGame.value,
            pan: this.panSelected,
            option: this.subRealtime.option_code,
            amount: this.myPopupamount,
          }
        } else {
          params = {
            period: this.realtimesInfo.period,
            game: this.nowSelectedGame.value,
            pan: this.panSelected,
            option: this.subRealtime.option,
            amount: this.myPopupamount,
          }
        }
        this.$store.dispatch('SetPadding', params)
          .then(response => {
            if (response.status === true) {
              this.changeRealTime()
              this.$store.dispatch('GetRealtimePt', { game: this.nowSelectedGame.value })
            }
            alert(response.message)
            console.log('补货单', response)
          })
        this.popoverVisibleID = 'none'
        this.dialogshow = 'none'
      },
      showBuHuo(e, item) {
        if (parseFloat(item.balance) !== 0 && !this.isClose) {
          this.popoverVisibleID = 'block'
          this.dialogshow = 'block'
          const screenX = document.body.clientWidth
          if (screenX - e.clientX > 100) {
            this.popoverX = e.clientX
          } else {
            this.popoverX = e.clientX - (screenX - e.clientX)
          }
          this.popoverY = e.clientY
          this.$refs.buhuoText.focus()
          this.subRealtime = JSON.parse(JSON.stringify(item))
        }
      },
      reflashLastResult() {
        this.request()
        this.changeRealTime()
      },
      setIntervalRequest() {
        interval = setInterval(async() => {
          await this.request()
          await this.changeRealTime()
          this.$store.dispatch('GetRealtimePt', { game: this.nowSelectedGame.value })
        }, 1000 * this.requestInterval)

        // 秒数自减
        intervalTime = setInterval(() => {
          this.diffClose--
          this.diffResult--
          this.requestSecond--
          if (this.requestSecond <= 0) {
            this.requestSecond = this.requestInterval
          }
        }, 1000)
      },
      async request() {
        // 获取对应游戏的当期信息
        await this.$store.dispatch('GetRealtimesInfo', { game: this.nowSelectedGame.value, _: Math.trunc(new Date().getTime() / 1000) })
          .then(response => {
            if (response) {
              this.realtimesInfo = response
              // 距离封盘
              this.diffClose = response.closeTime - response.serverTime
              // 距离开奖
              this.diffResult = response.resultTime - response.serverTime
            }
          })
      },
      seconds(diff) {
        return Math.trunc(diff) % 60
      },
      minutes(diff) {
        return Math.trunc(diff / 60) % 60
      },
      hours(diff) {
        return Math.trunc(diff / 60 / 60) % 24
      },
      days(diff) {
        return Math.trunc(diff / 60 / 60 / 24)
      },
      formatTime(diff) {
        let hours = 0
        let minutes = 0
        let seconds = 0

        if (diff > 0) {
          hours = this.hours(diff)
          minutes = this.minutes(diff)
          seconds = this.seconds(diff)
        }
        return { hours, minutes, seconds }
      },
      getGameOptions() {
        this.$store.dispatch('GetGameOptions')
          .then(response => {
            this.gameInfo = []
            for (const key in response) {
              if (key !== 'message') {
                for (const index in response[key]) {
                  const temp = {
                    label: response[key][index],
                    value: index,
                  }
                  this.gameInfo.push(temp)
                }
              }
            }
            this.$store.commit('SET_NOW_SELECTED_GAME', this.gameInfo[0])
          })
      },
      readyBefore() {
        this.$store.dispatch('GetGameOptions')
          .then(response => {
            this.gameInfo = []
            for (const key in response) {
              if (key !== 'message') {
                for (const index in response[key]) {
                  const temp = {
                    label: response[key][index],
                    value: index,
                  }
                  this.gameInfo.push(temp)
                }
              }
            }
            this.$store.commit('SET_NOW_SELECTED_GAME', this.gameInfo[0])
            this.request()
            const params = {
              game: this.gameInfo[0].value,
              rtt: 1,
              pan: 0, // 默认全部盘口
              type: 1, // 默认实占
              sort: 1, // 按盈亏排序
            }
            this.$store.dispatch('GetRealtime', params)
            this.$store.dispatch('GetRealtimePt', { game: this.gameInfo[0].value })
              .then(response => {
                this.nowRtt = response[0]
              })
          })
      },
    },
    watch: {
      $router(to, from) {
        clearInterval(interval)
        clearInterval(intervalTime)
      },
    },
    filters: {
      twoDigits(value) {
        if (value.toString().length <= 1) {
          return '0' + value.toString()
        }
        return value.toString()
      },
    },
    destroyed() {
      clearInterval(interval)
      clearInterval(intervalTime)
    },
    data() {
      return {
        dialogshow: 'none',
        isClose: false, // 是否已开奖
        otherTypeBuHuoOdds: 0, // 整合类的限额
        myPopupamount: 0, // 补货弹窗金额
        popupGameInfo: '', // 弹窗数据
        gameInfo: [], // 彩种数据
        now: Math.trunc(new Date().getTime() / 1000),
        date: null,
        stop: false, // 是否停止自动刷新
        diffClose: 0, // 离封盘时间戳
        diffResult: 0, // 离开奖时间戳
        requestInterval: 10, // 请求间隔秒数
        requestSecond: 10, // 显示秒数
        realtimesInfo: 0, // 当前彩种期数信息
        dialogVisible: false, // 弹出窗
        popoverVisibleID: 'none', // 补货弹出窗
        popoverX: 0, // 补货弹出窗的x轴方向上的距离
        popoverY: 0, // 补货弹出窗的Y轴方向上的距离
        content_title: [
          '内容',
          '金额',
          '退水',
          '派彩',
        ],
        content_info: [],
        totals: '',
        subRealtime: {}, //  点击盈亏的子项数据
        reflashTime: [
          {
            label: '手动',
            value: 0,
          },
          {
            label: '10秒',
            value: 10,
          },
          {
            label: '20秒',
            value: 20,
          },
          {
            label: '30秒',
            value: 30,
          },
          {
            label: '40秒',
            value: 40,
          },
          {
            label: '50秒',
            value: 50,
          },
          {
            label: '60秒',
            value: 60,
          },
          {
            label: '70秒',
            value: 70,
          },
          {
            label: '80秒',
            value: 80,
          },
          {
            label: '90秒',
            value: 90,
          },
        ],
        nowRtt: {},
        sortSelected: '1',
        sort: [{
          value: '1',
          label: '按盈亏排序',
        }, {
          value: '2',
          label: '按金额排序',
        }, {
          value: '3',
          label: '按号码排序',
        }],
        typeSelected: '1',
        type: [{
          value: '1',
          label: '实占',
        }, {
          value: '2',
          label: '虚占',
        }, {
          value: '3',
          label: '补货',
        }],
        panSelected: '0',
        pan: [{
          value: '0',
          label: '全部',
        }, {
          value: '1',
          label: 'A盘',
        }, {
          value: '2',
          label: 'B盘',
        }, {
          value: '3',
          label: 'C盘',
        }, {
          value: '4',
          label: 'D盘',
        }],
      }
    },
    mounted() {
    },
    async created() {
      await this.readyBefore()
      this.setIntervalRequest()
    },
  }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .dashboard {
    &-container {
      /*margin: 30px;*/
      margin: 0 5px;
    }
    &-text {
      font-size: 30px;
      line-height: 46px;
    }
  }

  table{
    width: auto;
    margin: 5px auto;
    border-collapse: collapse;
    border-spacing: 0;
  }
  .bread-nav{
    font-size: 13px;
    line-height: 30px;
    background: #ECEFF2;
    border-bottom: 1px solid #d0dff2;
    padding: 0 0 0 10px;
    overflow: hidden;
  }
  .bread-nav-lastResultInfo{
    color:#386399;
    font-weight: bold;
    display: block;
    float: left;
    background: url("../../../../static/agent/img/tb.png") no-repeat left center;
    padding-left: 20px;
  }
  .bread-nav-lastResultInfo-group1{
    float: left;
  }
  .bread-nav-lastResultInfo-group2{
    float: left;
  }
  .bread-nav-lastResultInfo-group2 select{
    vertical-align: middle;
    margin-top: -3px;
  }
  .bread-nav-lastResultInfo-group3{
    float: right;
    display: flex;
  }
  .bread-nav-lastResultInfo-group3 select{
    vertical-align: middle;
    margin-top: -3px;
  }
  .bread-nav-lastResultInfo-group3 .menu1{
    padding-right: 10px;
  }
  .bread-nav-lastResultInfo-group3 .b-container{
    display: flex !important;
  }
  .bread-nav-lastResultInfo-group3 .bb{
    margin-top: 5px;
  }
  .bread-nav-lastResultInfo-group3 .lastResultNum{
    padding: 0 10px;
  }
  .bread-nav-lastResultInfo-group3 select{
    height:20px;
    vertical-align: middle;
    margin: 5px 10px auto auto;
  }
  .bread-nav-lastResultInfo-group3-btn{
    height:20px;
    margin-right: 10px;
    vertical-align: middle;
    margin-top: 5px;
    padding: 0;
  }
  .bread-nav-lastResultInfo img{
    padding-top: 4px;
    padding-right:4px;
  }
  .bread-nav-lastResultInfo-name{
    margin: 0 10px;
    color: #eb6100;
    font-weight: bold;
  }
  .bread-nav-lastCloseInfo-close{
    margin: 0 10px;
    color: red;
    font-weight: bold;
  }
  .bread-nav-lastResultInfo-close{
    margin: 0 10px;
    color: #097c25;
    font-weight: bold;
  }

  .bread-nav-select{
    height:30px;
  }
  .lastResultNum{
    font-weight: bold;
    color: #386399;
  }

  .top-table{
    width: 100%
  }
  .top-table td{
    vertical-align: top;
  }

  .totals{
    text-align: center;
  }
  .totals table{
    width: auto;
    margin: 5px auto;
    border-collapse: collapse;
    border-spacing: 0;
  }
  .totals-title{

  }
  .totals-title th{
    box-shadow: inset 0px -14px 19px 2px #CAE8F6;
    height: 25px;
    text-align: center;
    color: #131950;
    font-weight: bold;
    line-height: 25px;
    font-size:14px;
    padding-left: 10px;
    padding-right: 10px;
    border: 1px solid #B9C2CB;
    margin: 0;
  }
  .totals-num:hover{
    background-color: #CAE8F6;
  }
  .totals-num td{
    height: 25px;
    text-align: center;
    color: #131950;
    font-weight: bold;
    line-height: 25px;
    font-size:14px;
    padding-left: 10px;
    padding-right: 10px;
    border: 1px solid #B9C2CB;
  }
  .totals-num-title{
    background: #F2F2F2
  }
  .upTable button{
    border:0;
    background-color: rgba(0, 0, 0, 0);
    color: blue;
    cursor: pointer;
  }
  .myTableTr:hover{
    background-color: #deedfe;
  }
  .upTable button:hover {
    text-decoration: underline;
  }
  .content table{
    width: 100%;
  }
  .footer{
    text-align: center;
    margin-top: 10px;
    font-size: 13px;
  }
  .footer input[type="text"]{
    width: 100px;
  }
  .footer button{
    width: 86px;
    height: 31px;
    line-height: 26px;
    color: #eeeeee;
    border: 0px;
    background-color: #487BD1;
    border-radius: 5px;
  }
  .footer button:hover{
    background-color: #7bb1d0;
    color:#fff100;
  }

  .myDialog{
    position: absolute;
    z-index:2100;
    background-color: #FFF;
    border-left: 1px solid #B9C2CB;
    border-right: 1px solid #B9C2CB;
    font-size:13px;
    min-width:150px;
  }

  .myDialog span {
    padding: 5px 10px;
  }
  .myDialog span:first-child{
    border-right: 1px solid #B9C2CB;
    width:50px;
  }
  .myDialog input{
    width: 65px;
  }
  .myDialog ul{
    border-top: 1px solid #B9C2CB;
    padding: 5px 0;
  }

  .myDialog ul:last-child {
    border-bottom: 1px solid #B9C2CB;
  }

  .myDialog-title{
    box-shadow: inset 0px -14px 19px 2px #CAE8F6;
    font-size:13px;
    font-weight: bold;
    text-align: center;
  }
  .myDialog-buttonGroup{
    text-align: center;
  }


  .subNav-lottery{
    background-color: #3F8CDC;
  }
  .subNav-lotteryBtn{
    color:#FFF;
    font-size:13px;
    font-weight: bold;
    line-height: 28px;
    border:none;
    background-color: #3F8CDC;
    float: left;
    cursor: pointer;
  }
  .subNav-lotteryBtn:hover{
    color:#fff100;
    text-decoration: underline;
  }
  .subNav-lotteryBtn-selected{
    color:#fff100;
  }

  .subCurrPage{
    width:100%;
    display: flex;
    background-color: #d1dbed;
    height: 28px;
    font-size: 13px;
    line-height: 28px;
    padding: 0 10px;
  }
  .subCurrPage-left{
    font-weight: bold;
  }
  .subCurrPage-left img{
    margin: -2px 10px 0 10px;
    vertical-align: middle;
  }
  .subCurrPage-right button{
    border: 0;
    border-right: 1px solid #1f2d3d;
    background-color: rgba(0, 0, 0, 0);
    cursor: pointer;
  }
  .subCurrPage-right button:last-child{
    border-right:0;
  }
  .subCurrPage-right button:hover{
    color:#e60012;
    text-decoration: underline;
    font-weight: bold;
  }
  .isSelectedBtn{
    color:#e60012;
    font-weight: bold;
  }

  .contentMiddle{
    padding: 10px;
  }
  .table-odds{
    font-weight: bold !important;
    color: #2836f4 !important;
    font-size: 15px !important;
    font-family: Arial, Helvetica, Verdana, Geneva, sans-serif;
  }
  .table-amount{
    font-weight: 500 !important;
    color:#299a26 !important;
  }
  .table-balance{
    font-weight: 500 !important;
    color:#555 !important;
  }
  .btn-td{
    background-color: #F2F2F2;
  }
  .paddingBtn{
    color:blue;
    background-color: #FFF;
    border:1px #CCC solid;
  }
  .paddingBtn:hover{
    color:red;
  }

  .spanA:hover{
    text-decoration: underline;
    cursor: pointer;
  }

  .dialogshow{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(136, 136, 136, 0.3);
    z-index: 10000;
    overflow-y: auto;
  }
</style>
